const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src/index.js"),
  output: {
    filename: "[name]-[contenthash:8].bundle.js",
    path: path.join(__dirname, "dist"),
    publicPath: "dist/",
  },
  optimization: {
    minimizer: [
      new TerserWebpackPlugin(),
      new OptimizeCssAssetsWebpackPlugin(),
    ],
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env"], { modules: "auto" }],
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /.vue$/,
        loader: "vue-loader",
      },
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.(jpg|png)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 10 * 1024,
          },
        },
      },
      {
        test: /.html$/,
        use: {
          loader: "html-loader",
          options: {
            attributes: {
              list: [
                {
                  tag: "img",
                  attribute: "src",
                  type: "src",
                },
                {
                  tag: "link",
                  attribute: "href",
                  type: "srcset",
                },
              ],
            },
          },
        },
      },
    ],
    plugins: [
      new HtmlWebpackPlugin({
        title: "Dynamic import",
        template: "./src/index.html",
        filename: "index.html",
      }),
      new MiniCssExtractPlugin({
        filename: "[name]-[contenthash:8].bundle.css",
      }),
    ],
    optimizaiton: {
      usedExports: true,
      minimize: true,
      concatenateModules: true,
    },
  },
};
